<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3241864_y5olqh57uek.css">
    <link rel="stylesheet" href="./css/nav.css">
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./css/index-sections.css">

</head>

<body>
    <!-- 导航栏 -->
    <nav id="global-nav">
        <ul class="header">
            <li class="nav-item">
                <a href="index.html" class="nav-link iconfont icon-apple-fill"> </a>
            </li>
            <li class="nav-item"><a href="./pages/store.html" class="nav-link">Store</a></li>
            <li class="nav-item"><a href="./pages/mac.html" class="nav-link">Mac</a></li>
            <li class="nav-item"><a href="#" class="nav-link">iPad</a></li>
            <li class="nav-item"><a href="#" class="nav-link">iPhone</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Watch</a></li>
            <li class="nav-item"><a href="#" class="nav-link">AirPods</a></li>
            <li class="nav-item"><a href="./pages/homepod.html" class="nav-link">TV & Home</a></li>
            <li class="nav-item"><a href="./pages/niublity.html" class="nav-link">Only on Apple </a></li>
            <li class="nav-item"><a href="#" class="nav-link">Accessories</a></li>
            <li class="nav-item"><a href="" class="nav-link">Support</a></li>
            <li class="nav-item">
                <a href="#" class="nav-link iconfont icon-search "> </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link iconfont icon-bag "> </a>
            </li>
        </ul>
    </nav>
    <section class="homepage-section section1">
        <img src="./images/index/unicef.png" alt="">
        <a href="#" class="blue-link iconfont">Donate to support families affected by the crisis in Ukraine <i
                class="iconfont icon-arrowup"></i></a>
    </section>

    <!-- 主体 -->
    <section class="homepage-section section2">
        <div class="iphone-13 common">
            <div class="content-wrapper">
                <h2 class="headline">iPhone 13 Pro</h2>
                <h3>Now in Alpine Green.</h3>
                <p class="avail">Available starting 3.18</p>
                <div class="links">
                    <a href="" class="blue-link iconfont">Learn more </a>
                    <a href="" class="blue-link iconfont">Shop </a>
                </div>
            </div>
        </div>
        <div class="iphone-se common">
            <div class="content-wrapper">
                <h2 class="headline">iPhone SE</h2>
                <h3>Love the power. Love the price.</h3>
                <p class="avail">Available starting 3.18</p>
                <div class="links">
                    <a href="" class="blue-link iconfont">Learn more </a>
                    <a href="" class="blue-link iconfont">Pre-order </a>
                </div>
            </div>
        </div>
        <div class="ipad-air common">
            <div class="content-wrapper">
                <h2 class="headline"> </h2>
                <h3>Light. Bright. Full of might.</h3>
                <p class="avail">Available starting 3.18</p>
                <div class="links">
                    <a href="" class="blue-link iconfont">Learn more </a>
                    <a href="" class="blue-link iconfont">Oder now </a>
                </div>
            </div>
        </div>
    </section>

    <section class="homepage-section  collection">
        <div class="item studio-display">
            <div class="content-wrapper">
                <h2 class="headline">Studio Display</h2>
                <h3>Now in Alpine Green.</h3>
                <p class="avail">Available starting 3.18</p>
                <div class="links">
                    <a href="" class="blue-link iconfont">Learn more </a>
                    <a href="" class="blue-link iconfont">Shop </a>
                </div>
            </div>
        </div>
        <div class="item mac-studio">
            <div class="content-wrapper">
                <h2 class="headline">Mac Studio</h2>
                <h3>Now in Alpine Green.</h3>
                <p class="avail">Available starting 3.18</p>
                <div class="links">
                    <a href="" class="blue-link iconfont">Learn more </a>
                    <a href="" class="blue-link iconfont">Shop </a>
                </div>
            </div>
        </div>
        <div class="item iphone-13">
            <div class="content-wrapper">
                <h2 class="headline">iPhone 13 Pro</h2>
                <h3>Now in Alpine Green.</h3>
                <p class="avail">Available starting 3.18</p>
                <div class="links">
                    <a href="" class="blue-link iconfont">Learn more </a>
                    <a href="" class="blue-link iconfont">Shop </a>
                </div>
            </div>
        </div>
        <div class="item watch">
            <div class="content-wrapper">
                <h2 class="headline">Watch</h2>
                <h3>Now in Alpine Green.</h3>
                <p class="avail">Available starting 3.18</p>
                <div class="links">
                    <a href="" class="blue-link iconfont">Learn more </a>
                    <a href="" class="blue-link iconfont">Shop </a>
                </div>
            </div>
        </div>
        <div class="item card">
            <div class="content-wrapper">
                <h2 class="headline">Card</h2>
                <h3>Get up to 3% Daily Cash back with every purchase.</h3>
                <div class="links">
                    <a href="" class="blue-link iconfont">Learn more </a>
                    <a href="" class="blue-link iconfont">Shop </a>
                </div>
            </div>
        </div>
        <div class="item tv">
            <div class="content-wrapper">
                <h4></h4>
                <p class="info">Live MLB Friday Night Baseball streaming soon, only on Apple TV+.</p>
                <div class="links">
                    <a href="" class="blue-link iconfont">Notify me </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer id="global-footer">
        <div class="footer-content">
            <div class="breadcrumbs">
                <a href="#" class="iconfont icon-apple-fill"></a>
                <ul class="paths">
                    <li class="path-item iconfont">
                        <span> Apple Store Online</span>
                    </li>
                    <li class="path-item iconfont">
                        <span> Apple Arcade</span>
                    </li>
                </ul>
            </div>

            <nav class="footer-list">
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>

            </nav>

            <div class="footer-info">
                <div class="shop"> More ways to shop: <a class="blue-link" href="#">Find an Apple Store</a> or <a class="blue-link" href="#">other retailer</a> near you. Or call 1‑800‑MY‑APPLE.</div>
                <div class="legal">
                    <div class="copyright">
                        Copyright © 2022 Apple Inc. All rights reserved.
                    </div>
                    <div class="links">
                        <a href="">Privacy Policy</a>
                        <a href="">Terms of Use</a>
                        <a href=""> Sales and Refunds</a>
                        <a href="">Legal</a>
                        <a href="">Site Map</a>
                    </div>
                    <div class="locale">United State</div>
                </div>
            </div>
        </div>
    </footer>
</body>

</html>